<template>
  <div class="Leftbottomcontainer">
    <Card title="液氨大槽趋势图">
      <div ref="acsidebarecharts" class="ac-sidebar-echarts"></div>
      <div class="ac-sidebar-font">
        <div class="ac-sidebar-block">
          <span class="ac-sidebar-temperature">6.069997°C</span>
          <div class="ac-sidebar-real">实时温度</div>
        </div>
        <div class="ac-sidebar-block">
          <span class="ac-sidebar-temperature">6.069997mm</span>
          <div class="ac-sidebar-real">实时温度</div>
        </div>
        <div class="ac-sidebar-block">
          <span class="ac-sidebar-temperature">6.069997MPa</span>
          <div class="ac-sidebar-real">实时温度</div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import * as echarts from "echarts";
import Card from "./Card.vue";
export default defineComponent({
  // name: "Echarts",
  components: {
    Card,
  },
  setup() {
    return {};
  },
  mounted() {
    console.log(111);
    this.Histogram();
  },
  methods: {
    Histogram() {
      let chartDom = this.$refs.acsidebarecharts;
      let myChart = echarts.init(chartDom);
      console.log(myChart);

      let option = {
        legend: {
          textStyle: {
            color: "#ffffff", //字体颜色
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          boundaryGap: [0, 0.01],
        },
        yAxis: [
          {
            type: "category",
            name: "Map",
            nameTextStyle: {
              color: "#fff",
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴刻度线
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            data: [4.0, 3.2, 2.4, 1.6, 0.0],
          },
          {
            type: "category",
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴刻度线
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            name: "mm",
            nameTextStyle: {
              color: "#fff",
            },
            data: [2400, 1920, 1500, 1240, 1150, 480],
          },
        ],
        series: [
          {
            name: "压力",
            type: "bar", //设置柱的宽度，要是数据太少，柱子太宽不美观~
            barWidth: 5,
            data: [20],
          },
          {
            name: "液体",
            type: "bar", //设置柱的宽度，要是数据太少，柱子太宽不美观~

            barWidth: 5,
            data: [15],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
});
</script>
<style lang="scss" scoped>
.ac-sidebar-echarts {
  width: 300px;
  height: 300px;
}

.ac-sidebar-font {
  display: flex;
  justify-content: space-around;
  text-align: center;

  .ac-sidebar-temperature {
    color: #ffc916;
    font-size: 15px;
    font-family: num;
  }

  .ac-sidebar-real {
    font-size: 12px;
    font-family: cn;
  }
}
</style>
